<template>
    <d2-container :filename="filename">
        <template slot="header">
            <el-steps :active="currentStep.idx" align-center>
                <el-step title="基础信息" description="添加商品标题基础配置"></el-step>
                <el-step title="图片及介绍" description="上传图片以及图文介绍"></el-step>
                <el-step title="SKU信息配置" description="sku选择/新增"></el-step>
                <el-step title="关联商品选择" description="套餐以及推荐商品选择"></el-step>
            </el-steps>
        </template>
        <el-row :gutter="10" style="margin-top: 20px;">
            <el-col :span="22" :offset="1">
                <component :is="currentStep.name" @next="next"></component>
            </el-col>
        </el-row>
    </d2-container>
</template>

<script>

  import { PRODUCT_STEP1, PRODUCT_STEP2, PRODUCT_STEP3, PRODUCT_STEP4 } from './steps/index'

  const STEP_OPTIONS = [
    {
      idx: 1,
      name: 'PRODUCT_STEP1'
    },
    {
      idx: 2,
      name: 'PRODUCT_STEP2'
    },
    {
      idx: 3,
      name: 'PRODUCT_STEP3'
    },
    {
      idx: 4,
      name: 'PRODUCT_STEP4'
    }
  ]

  export default {
    name: 'product-add',
    components: {
      PRODUCT_STEP1,
      PRODUCT_STEP2,
      PRODUCT_STEP3,
      PRODUCT_STEP4
    },
    data () {
      return {
        filename: __filename,
        activeIdx: 0
      }
    },
    computed: {
      currentStep () {
        return STEP_OPTIONS[this.activeIdx]
      }
    },
    methods: {
      next () {
        if (this.activeIdx++ > 4) {
          this.activeIdx = 0
        }
      }
    }
  }
</script>

<style scoped>


</style>
